<template>
    <div class="dayList-container">
        <div class="date-header">
            <div class="item" @click="openPicker1">{{pickerValue1 | yyyy-MM-dd}}</div>
            <div class="item" @click="openPicker2">{{pickerValue2 | yyyy-MM-dd}}</div>
        </div>
        <div class="deatail-desc">
            <div class="amount-all">共有<span>{{data.totalNum}}</span>笔收入</div>
            <div class="count-all">合计金额<span>￥{{data.totalIncome}}</span></div>
        </div>
        <div class="deatail-cont" v-if="data.resList.length > 0" v-for="(item, i) in data.resList" :key="i">
            <div class="gray-item"></div>
            <div class="item-title">
                <div class="get-time">{{item.date}}</div>
                <div class="money-all">共收入¥{{item.dailyIncome}}</div>
            </div>
            <ul class="deatail-list">
                <router-link tag="li" :to="{path: '/data/dayInDeatail', query: {id: list.incomeDetailId, type: list.type}}" class="list-item" v-for="(list, j) in item.detailList" :key="j">
                    <img :src="list.imgUrl">
                    <div class="word-cont">
                        <div class="word-up">{{list.commodityName}}</div>
                        <div class="word-down">
                            <span>{{list.creatDateStr}}</span>
                            <span>收入¥{{list.amount}}</span>
                        </div>
                    </div>
                </router-link>
            </ul>
        </div>
        <mt-datetime-picker
            ref="picker1"
            type="date"
            @confirm="reqDataByTime"
            v-model="pickerValue1">
        </mt-datetime-picker>
        <mt-datetime-picker
            ref="picker2"
            type="date"
            @confirm="reqDataByTime"
            v-model="pickerValue2">
        </mt-datetime-picker>
        <div class="serach-btn" @click="search">筛选</div>
        <mt-popup v-model="popupVisible" position="right" class="search-panel">
             <com-search :searchData="searchData" @closeSearch="closeSearch" @changeDefault="changeDefault" @searchValue="searchValue"></com-search>
        </mt-popup>
        <com-footer :currentIndex="cuIndex"></com-footer>
    </div>
</template>
<script>
    import filter from '../../api/filter.js'
    import comFooter from '../../components/comFooter';
    import dataApi from '../../api/data.js';
    import { Toast } from 'mint-ui';
    import comSearch from '../../components/comSearch';
    export default {
        components: {
            comFooter,
            comSearch
        },
        data () {
            return {
                pickerValue1: '',
                pickerValue2: '',
                type: [1,2,3,4,5,6,7,9],
                cuIndex: 1,
                data: {
                    totalNum: 0,
                    totalIncome: 0,
                    resList: []
                },
                arr1: [{
                        label: '席位',
                        value: 1,
                    }, {
                        label: '听书年卡',
                        value: 2,
                    },{
                        label: '微说',
                        value: 3,
                    },{
                        label: '席位分润',
                        value: 4,
                    }, {
                        label: '听书年卡分润',
                        value: 5,
                    },{
                        label: '微说分润',
                        value: 6,
                    },{
                        label: '实体卡分润',
                        value: 7,
                    },{
                        label: '听书年卡返润',
                        value: 9,
                    }],
                arr2: [{
                        label: '席位',
                        value: 1,
                    }, {
                        label: '听书年卡',
                        value: 2,
                    },{
                        label: '微说',
                        value: 3,
                    },{
                        label: '听书年卡返润',
                        value: 9,
                    }],
                popupVisible: false,
                obj:{},
                searchData: [{
                    default: [1],
                    name: '请选择收入类型',
                    info: ''
                }],
            }
        },
        created() {
            let str = localStorage.getItem('dongHang_data');
            this.obj = JSON.parse(str);
            if (this.obj.level == 1) {
                this.searchData[0].info = this.arr1;
            } else {
                this.searchData[0].info = this.arr2;
            }
            let today = new Date();
            this.pickerValue2 = this.changeDate(today)
            today.setTime(today.getTime() - 24*60*60*1000);
            this.pickerValue1 = this.changeDate(today)
            this.reqData(this.obj.agentId, this.type.join(), this.pickerValue1, this.pickerValue2);
        },
        methods: {
            reqData(id, arr, date1, date2) {
                dataApi.dayInListApi(id, arr, date1, date2).then(res => {
                    if (res.code == 0) {
                        if (res.t.length > 0) {
                            this.data = res.t[0];
                        }
                    } else {
                        Toast({
                            message: res.message,
                            duration: 2000
                        });
                    }
                })
            },
            changeDate(date) {
                return [date.getFullYear()
                , date.getMonth() + 1
                , date.getDate()
                ].join("-");
            },
            openPicker1() {
                this.$refs.picker1.open();
            },
            openPicker2() {
                this.$refs.picker2.open();
            },
            reqDataByTime() {
                let yesterday = this.changeDate(this.pickerValue1);
                let today = this.changeDate(this.pickerValue2);
                this.reqData(this.obj.agentId, this.type.join(), yesterday, today);
            },
            search() {
                this.popupVisible = true
            },
            searchValue(){
                this.popupVisible = false
                this.type = this.searchData[0].default.slice();
                let yesterday = this.changeDate(this.pickerValue1);
                let today = this.changeDate(this.pickerValue2);
                this.reqData(this.obj.agentId, this.type.join(), yesterday, today);
            },
            closeSearch() {
                this.popupVisible = false
            },
            changeDefault(obj) {
                if (this.searchData[0].default.indexOf(obj.value) == -1) {
                    this.searchData[0].default.push(obj.value)
                } else {
                    let index = this.searchData[0].default.indexOf(obj.value)
                    this.searchData[0].default.splice(index, 1)
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .dayList-container {
        .search-panel{
            width: 6.6rem;
            height: 100%;
        }
        .date-header {
            height: 1rem;
            font-size: .28rem;
            padding: .3rem 0;
            box-sizing: border-box;
            border-bottom: 1px solid #ccc;
            .item {
                float: left;
                width: 50%;
                text-align: center;
                box-sizing: border-box;
            }
            .item:first-child {
                border-right: 1px solid #ccc;
            }
        }
        .deatail-desc {
            height: 1rem;
            font-size: .28rem;
            font-weight: bold;
            div {
                margin-left: 1.2rem;
                float: left;
                height: 1rem;
                line-height: 1rem;
            }
            .amount-all {
                span {
                    color: #29abae;
                }
            }
            .count-all {
                span {
                    color: #ff2d41;
                }
            }
        }
        .deatail-cont {
            margin-bottom: 1rem;
            .gray-item {
                height: .2rem;
                background-color: #efefef;
            }
            .item-title {
                overflow: hidden;
                font-size: .28rem;
                height: .8rem;
                padding: 0 .3rem;
                .get-time {
                    float: left;
                    height: .8rem;
                    line-height: .8rem;
                }
                .money-all {
                    float: right;
                    height: .8rem;
                    line-height: .8rem;
                }
            }
            .deatail-list {
                li {
                    padding: .3rem;
                    border-top: 1px solid #ccc;
                }
                .list-item {
                    img {
                        float: left;
                        width: 1.5rem;
                        height: 1.5rem;
                        border-radius: .2rem;
                    }
                }
                .list-item:last-child {
                    border-bottom: 1px solid #ccc;
                }
                .word-cont {
                    margin-left: 1.8rem;
                    height: 1.5rem;
                }
                .word-up {
                    margin-top: .15rem;
                    font-size: .32rem;
                    font-weight: bold;
                }
                .word-down {
                    margin-top: .2rem;
                    font-size: .28rem;
                    span:last-child {
                        float: right;
                    }
                }
            }
        }
        .serach-btn {
            border-radius: 50%;
            background-color: rgb(41, 171, 174);
            box-shadow: 0px 3px 7px 0px rgba(4, 0, 0, 0.35);
            position: fixed;
            right: .5rem;
            bottom: 1.5rem;
            width: .9rem;
            height: .9rem;
            line-height: .9rem;
            text-align: center;
            z-index: 10;
            font-size: .3rem;
            color: #fff;
        }
    }
    
</style>